<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" @click="handleChecked()" v-model="allChecked" /></th>
                    <td>选择</td>
                    <td>序号</td>
                    <td>商品名称</td>
                    <td>单价</td>
                    <td>总价</td>
                    <td>数量</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(pro,index) in proList">
                        <td><input type="checkbox" v-model="pro.checked"  name="all"/  @click="clickmoney(index)"></td>
                    <td>{{pro.id}}</td>
                    <td>{{pro.a }}</td>
                    <td>{{pro.b | filterMoney(pro.b)}}</td>
                    <td>￥ {{pro.b*pro.proCount | filterMoney(pro.b*pro.proCount)}} 元</td>

                    <td>
                        <input type="button" value="-" @click="add(index)">
                        <input type="text" v-model="pro.proCount">
                        <input type="button" value="+" @click="cdd(index)">
                    </td>
                    <td>
                        <a href="" @click.prevent='del(index)'>删除</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>总计</td>
                    <td>{{ toto }}</td>
                    <td>
                    </td>

                </tr>
            </tfoot>


        </table>
    </div>
</body>

</html>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            allChecked:false,
            toto:0,
            proList: [
                {
                    id: 1, a: "ipone", b: 132, proCount: 0, checked: false,current_all:0,
                },
                {
                    id: 2, a: "茄子", b: 1320, proCount: 0, checked: false,current_all:0,
                },
                {
                    id: 3, a: "西瓜", b: 1321, proCount: 0, checked: false,current_all:0,
                },
                {
                    id: 4, a: "猪蹄", b: 1320, proCount: 0, checked: false,current_all:0,
                },
            ]
        },
        computed: {
            // 算全部商品
            // toto(pro) {
            //     let toto = 0;
            //     for (let i = 0; i < this.proList.length; i++) {
            //         toto += Number(this.proList[i].b * this.proList[i].proCount)
            //     }
            //     return toto.toFixed(2);
            // }
        },
        // 加减算法
        methods: {
           clickmoney(a){
                // this.toto=0; 
                console.log(a)
                if(!this.proList[a].checked){
                    this.proList[a].checked=true;
                    this.abc(a)
                }else{
                    this.proList[a].checked=false;
                    this.abc(a)
                }     
           },
           abc(a){
            this.proList[a].current_all= this.proList[a].b * this.proList[a].proCount;
                var allNum = 0;
                for(var i=0; i < this.proList.length; i++){
                    if (this.proList[i].checked==true) {
                        allNum+=this.proList[i].current_all
                    }
                }
                this.toto=allNum;
           },
            add(a) {
                console.log(this.proList[a].proCount)
                this.proList[a].proCount <= 0 ?this.proList[a].proCount = 0 : this.proList[a].proCount--;
                this.abc(a)
            },
            cdd(a) {
                this.proList[a].proCount++
                // pro.proCount++;
                this.abc(a)
            },

            // 删除购物车商品
            del(a) {
                //  this.list.some((item,i)=>{
                //    if(item.id == id){
                //      this.list.splice(i,1)
                //      return true;
                //    }

                //  })
                // var index = this.proList.findIndex(pro => {
                //     if (pro.a == a) {
                //         return true;
                //     }
                // })
                this.proList.splice(a,1)
                this.abc(a)
            },
            handleChecked: function (pro) {
            //全选
            if (this.allChecked == false) {
                for (var i = 0; i < this.proList.length; i++) {
                    var item = this.proList[i];
                    item.checked = true;
                }
            } else {  //取消全选
                for (var i = 0; i < this.proList.length; i++) {
                    var item = this.proList[i];
                    item.checked = false;
                }
            }
            this.allChecked = !this.allChecked;
            // this.clickmoney()
            var allNum = 0;
                for(var i=0; i < this.proList.length; i++){
                    if (this.proList[i].checked==true) {
                        allNum+=this.proList[i].current_all
                    }
                }
                this.toto=allNum;
        },
    
        },


        // 将购物车商品添加小数点
        filters: {
            filterMoney(val) {
                return val.toFixed(2);

            }
        },

        
    })
</script>